<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@page isELIgnored="false" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>个人中心</title>
    <base href="<%=basePath%>">
    <link rel="stylesheet" href="render/css/frontend/common/base.css" type="text/css"/>
    <link rel="stylesheet" href="render/css/frontend/common/shop_common.css" type="text/css"/>
    <link rel="stylesheet" href="render/css/frontend/shop_header.css" type="text/css"/>
    <link rel="stylesheet" href="render/css/frontend/shop_home.css" type="text/css"/>
    <link rel="stylesheet" href="render/css/frontend/shop_manager.css" type="text/css"/>

    <script type="text/javascript" src="render/js/jquery.min.js"></script>
    <style type="text/css">
        section.order-type {
            width: 100%;
            height: 25px;
            margin: 10px auto;
            border-bottom: 2px solid #E8E8E8;
        }

        section.order-type div.selected {
            border-bottom: 2px solid #FF0036;
        }

        section.order-type div {
            float: left;
            height: 25px;
        }

        section.order-type div.selected a {
            color: #FF0036;
        }

        section.order-type a {
            border-right: 1px solid #E8E8E8;
            display: inline-block;
            font-size: 13px;
            font-weight: bold;
            color: #000;
            padding: 0 20px;
            text-decoration: none;
        }

        section.order-type a:hover {
            color: #FF0036;
            text-decoration: none;
        }

        tr.dingdan {
            height: 79px;
        }

        span.showAll {
            float: right;
        }
    </style>
</head>
<body>
<!-- Header Start -->
<jsp:include page="common/head.jsp"></jsp:include>

<!-- TopHeader Center -->
<jsp:include page="common/topheader_center.jsp"></jsp:include>
<!-- TopHeader Center End -->

<!-- Header Menu -->
<jsp:include page="common/header_menu.jsp"></jsp:include>
<!-- Header Menu End -->

<div class="shop_hd_breadcrumb">
    <strong>当前位置：</strong>
    <span>
        <a href="/">首页</a>&nbsp;›&nbsp;
        <a href="/render/myhome">个人中心</a>&nbsp;›&nbsp;
        <a href="/render/member">我的订单</a>
    </span>
</div>
<div class="clear"></div>
<!-- 面包屑 End -->
<!-- Header End -->

<!-- 我的个人中心 -->
<div class="shop_member_bd clearfix">
    <!-- 左边导航 -->
    <jsp:include page="common/myshop_left.jsp"></jsp:include>
    <!-- 左边导航 End -->

    <!-- 右边购物列表 -->
    <div class="shop_member_bd_right clearfix">
        <div class="shop_meber_bd_good_lists clearfix">
            <section class="order-type">
                <%--订单状态:0-已取消-10-未付款，20-已付款，40-已发货，50-交易成功，60-交易关闭--%>
                <div class="selected">
                    <a href="javascript:void(0);" order-status="0">所有订单</a>
                </div>
                <div>
                    <a href="javascript:void(0);" order-status="10">待付款</a>
                </div>
                <div>
                    <a href="javascript:void(0);" order-status="20">待发货</a>
                </div>
                <div>
                    <a href="javascript:void(0);" order-status="40">待确认</a>
                </div>
                <div>
                    <a href="javascript:void(0);" order-status="50">待评价</a>
                </div>
                <div>
                    <a href="javascript:void(0);" order-status="60">待评价</a>
                </div>
            </section>
            <table>
                <thead class="tab_title">
                <th style="width:410px;"><span>商品信息</span></th>
                <th style="width:100px;"><span>单价</span></th>
                <th style="width:80px;"><span>数量</span></th>
                <th style="width:100px;"><span>订单总价</span></th>
                <th style="width:115px;"><span>状态与操作</span></th>
                </thead>
                <tbody>
                <c:forEach items="${orders}" var="order">
                    <tr>
                        <td colspan="5">
                            <table class="good" order-status="${order.status}" oid="${order.id}" id="${order.id}">
                                <thead>
                                <tr>
                                    <th colspan="5">
                                        <span><strong>订单号码：</strong>${order.order_no}</span>
                                    </th>
                                    <th colspan="1">
                                        <span onclick="changeTr('${order.id}',this);" class="showAll">展开</span>
                                    </th>
                                </tr>
                                </thead>
                                <tbody>
                                <c:forEach items="${order.orderItem}" var="orderitem" varStatus="status">
                                    <tr class="dingdan" style="display: none;">
                                        <td class="dingdan_pic">
                                            <img src="${orderitem.product_image}"/></td>
                                        <td class="dingdan_title">
                                            <span><a href="javascript:void(0);">${orderitem.product_name}</a></span><br/>
                                        </td>
                                        <td class="dingdan_danjia">￥<strong>${orderitem.current_unit_price}</strong>
                                        </td>
                                        <td class="dingdan_shuliang">${orderitem.total_price}</td>
                                        <td class="dingdan_zongjia">￥<strong>${order.payment}</strong><br/>(免运费)</td>
                                        <c:if test="${order.status=='10'}">
                                            <td class="digndan_caozuo">
                                                    <%--未付款就谈出二维码模拟框--%>
                                                <a href="javascript:void(0);" onclick="getManey('${order.order_no}');"
                                                   class="order-button blue">未付款</a>
                                                <br>
                                                <br>
                                                    <%--该订单显示交易关闭--%>
                                                <a href="javascript:void(0);" class="order-button blue">取消</a>
                                                <br>
                                                <br>
                                            </td>
                                        </c:if>
                                        <c:if test="${order.status=='20'}">
                                            <td class="digndan_caozuo">
                                                    <%--点击过后，就提示确认收货，确定或取消--%>
                                                <a href="javascript:void(0);" onclick="changeOrderStatus('50');"
                                                   class="order-button blue">确认收货</a>
                                                <br>
                                                <br>
                                                    <%--退货--%>
                                                <a href="javascript:void(0);" class="order-button blue">退货</a>
                                                <br>
                                                <br>
                                            </td>
                                        </c:if>
                                        <c:if test="${order.status=='40'}">
                                            <td class="digndan_caozuo">
                                                    <%--无法点击--%>
                                                <a href="#nowhere" class="order-button white">已发货</a>
                                                <br>
                                                <br>
                                                <a href="javascript:void(0);" onclick="changeOrderStatus('60');"
                                                   class="order-button blue">退货</a>
                                                <br>
                                                <br>
                                            </td>
                                        </c:if>
                                        <c:if test="${order.status=='50'}">
                                            <td class="digndan_caozuo">
                                                <a href="#nowhere" class="order-button white">交易成功</a>
                                                <br>
                                                <br>
                                                    <%--点击发送id---搜索指定class---生成textarea--%>
                                                <a href="javascript:void(0);"
                                                   onclick="createText('${order.id}','${orderitem.id}',this);"
                                                   class="order-button blue">评论</a>
                                                <br>
                                                <br>
                                                <a href="javascript:void(0);" class="order-button blue">订单详情</a>
                                            </td>
                                        </c:if>
                                    </tr>
                                    <tr class="${orderitem.id}" style="display: none;" id="${orderitem.id}">
                                        <th colspan="6">
                                            <div class="case">
                                                <textarea name="Test_1" id="Test_1" rows="10" style="width: 99%">
                                                    悟空你也太调皮了，我跟你说过，叫你不要乱扔东西， 乱扔东西这么做…… （咣当，悟空棍子掉在地上）
                                                </textarea>
                                            </div>
                                            <div id="popHint" style="left: 61px; top: 68px; display: none;">
                                                <div id="popHeader">
                                                    <div class="popLeft"></div>
                                                    <div id="popHintText"></div>
                                                    <div class="popRight"></div>
                                                </div>
                                                <div class="popAngle"><span></span></div>
                                            </div>
                                        </th>
                                    </tr>
                                </c:forEach>
                                </tbody>
                            </table>
                        </td>
                    </tr>
                </c:forEach>
                </tbody>
            </table>
        </div>
    </div>
    <!-- 右边购物列表 End -->
</div>
<!-- 我的个人中心 End -->

<!-- Footer - wll -->
<jsp:include page="common/footer.jsp"></jsp:include>
<!-- Footer End -->
</body>
<script type="text/javascript">
    <!--
    // 这里都是公用函数，挺多的...
    var
// 获取元素
        $ = function (element) {
            return (typeof (element) == 'object' ? element : document.getElementById(element));
        },
// 判断浏览器
        brower = function () {
            var ua = navigator.userAgent.toLowerCase();
            var os = new Object();
            os.isFirefox = ua.indexOf('gecko') != -1;
            os.isOpera = ua.indexOf('opera') != -1;
            os.isIE = !os.isOpera && ua.indexOf('msie') != -1;
            os.isIE7 = os.isIE && ua.indexOf('7.0') != -1;
            return os;
        },
// 生成元素到refNode
        appendElement = function (tagName, Attribute, strHtml, refNode) {
            var cEle = document.createElement(tagName);
// 属性值
            for (var i in Attribute) {
                cEle.setAttribute(i, Attribute[i]);
            }
            cEle.innerHTML = strHtml;
            refNode.appendChild(cEle);
            return cEle;
        },
// 获取元素坐标
        getCoords = function (node) {
            var x = node.offsetLeft;
            var y = node.offsetTop;
            var parent = node.offsetParent;
            while (parent != null) {
                x += parent.offsetLeft;
                y += parent.offsetTop;
                parent = parent.offsetParent;
            }
            return {x: x, y: y};
        },
// 事件操作(可保留原有事件)
        eventListeners = [],
        findEventListener = function (node, event, handler) {
            var i;
            for (i in eventListeners) {
                if (eventListeners[i].node == node && eventListeners[i].event == event && eventListeners[i].handler == handler) {
                    return i;
                }
            }
            return null;
        },
        myAddEventListener = function (node, event, handler) {
            if (findEventListener(node, event, handler) != null) {
                return;
            }
            if (!node.addEventListener) {
                node.attachEvent('on' + event, handler);
            } else {
                node.addEventListener(event, handler, false);
            }
            eventListeners.push({node: node, event: event, handler: handler});
        },
        removeEventListenerIndex = function (index) {
            var eventListener = eventListeners[index];
            delete eventListeners[index];
            if (!eventListener.node.removeEventListener) {
                eventListener.node.detachEvent('on' + eventListener.event,
                    eventListener.handler);
            } else {
                eventListener.node.removeEventListener(eventListener.event,
                    eventListener.handler, false);
            }
        },
        myRemoveEventListener = function (node, event, handler) {
            var index = findEventListener(node, event, handler);
            if (index == null) return;
            removeEventListenerIndex(index);
        },
        cleanupEventListeners = function () {
            var i;
            for (i = eventListeners.length; i > 0; i--) {
                if (eventListeners[i] != undefined) {
                    removeEventListenerIndex(i);
                }
            }
        };
    -->
</script>
<script type="text/javascript">
    <!--
    /*======================================================
    - statInput 输入限制统计
    - By Mudoo 2008.5
    - 长度超出_max的话就截取...貌似没有更好的办法了
    ======================================================*/
    function statInput(e, _max, _exp) {
        e = $(e);
        _max = parseInt(_max);
        _max = isNaN(_max) ? 0 : _max;
        _exp = _exp == undefined ? {} : _exp;
        if (e == null || _max == 0) {
            alert('statInput初始化失败！');
            return;
        }
        // 浏览器
        var _brower = brower();
        // 输出对象
        _objMax = _exp._max == undefined ? null : $(_exp._max),
            _objTotal = _exp._total == undefined ? null : $(_exp._total),
            _objLeft = _exp._left == undefined ? null : $(_exp._left),
            // 弹出提示
            _hint = _exp._hint == undefined ? null : _exp._hint;
        // 初始统计
        if (_objMax != null) _objMax.innerHTML = _max;
        if (_objTotal != null) _objTotal.innerHTML = 0;
        if (_objLeft != null) _objLeft.innerHTML = 0;
        // 设置监听事件
        // 输入这个方法比较好.
        // 但是Opera下中文输入跟粘贴不能正确统计...相当BT的东西...
        // 如果不考虑Opera的话就用这个吧.否则就老老实实用计时器.
        if (_brower.isIE) {
            myAddEventListener(e, "propertychange", stat);
        } else {
            myAddEventListener(e, "input", stat);
        }
        /*
        // 用计时器的话就什么浏览器都支持了.
        var _intDo = null;
        myAddEventListener(e, "focus", setListen);
        myAddEventListener(e, "blur", remListen);
        function setListen() {
        _intDo = setInterval(stat, 10);
        }
        function remListen() {
        clearInterval(_intDo);
        }
        */
        // 统计函数
        var _len, _olen, _lastRN, _sTop;
        _olen = _len = 0;

        function stat() {
            _len = e.value.length;
            if (_len == _olen) return;// 防止用计时器监听时做无谓的牺牲...
            if (_len > _max) {
                _sTop = e.scrollTop;
                // 避免IE最后俩字符为'\r\n'.导致崩溃...
                _lastRN = (e.value.substr(_max - 1, 2) == "\r\n");
                e.value = e.value.substr(0, (_lastRN ? _max - 1 : _max));
                if (_hint == true) popHint(e, "悟空你也太调皮了，为师跟你说过，叫你不要输那么多字~~.");
                // 解决FF老是跑回顶部
                if (_brower.isFirefox) e.scrollTop = e.scrollHeight;
            }
            _olen = _len = e.value.length;
            // 显示已输入字数
            if (_objTotal != null) _objTotal.innerHTML = _len;
            // 显示剩余可输入字数
            if (_objLeft != null) _objLeft.innerHTML = (_max - _len) < 0 ? 0 : (_max - _len);
        }

        stat();
    }

    /*********************************************
     - POPHint 弹出提示框
     - By Mudoo 2008.5
     **********************************************/
    function popHint(obj, msg, initValues) {
        var
            _obj = $(obj),
            _objHint = $("popHint"),
            _msg = msg,
            _init = initValues;
            // 初始化失败...
            if (_obj == undefined || _msg == undefined || _msg == "") return;
            // 设置初始值
            _init = _init == undefined ? {_type: "wrong", _event: "click"} : _init;
            // obj如果不可见。设置弹出对象为obj父元素
            if (_obj.style.display == 'none' || _obj.style.visibility == 'hidden' || _obj.getAttribute('type') == 'hidden') _obj = _obj.parentNode;
        var
            _type = null,
            _event = null,
            _place = getCoords(_obj),
            _marTop = null,
            _objText = $("popHintText"),
            // 初始化
            init = function () {
                var _hint = _obj.getAttribute("hint");
                if (_hint == "false") return;
                // 有的时候initValues不为空.但是只设置一个值...避免发生错误.再次设置初始值...
                _type = _init._type == undefined ? "wrong" : _init._type;
                _type = _type.toLowerCase();
                _event = _init._event == undefined ? "click" : _init._event;
                _event = _event.toLowerCase();
                /*
                ******************************************
                popHtml
                ******************************************
                <div id="popHint">
                <div id="popHeader">
                <div class="popLeft"></div>
                <div id="popHintText"><span class=\"popIcon wrong></span>请输入您的用户名！</div>
                <div class="popRight"></div>
                </div>
                <div class="popAngle"><span></span></div>
                </div>
                */
                // 好了.输出...
                var _Html = "<div id=\"popHeader\">" +
                    "<div class=\"popLeft\"></div>" +
                    "<div id=\"popHintText\"></div>" +
                    "<div class=\"popRight\"></div>" +
                    "</div>" +
                    "<div class=\"popAngle\"><span></span></div>"
                if (_objHint == null) {
                    _objHint = appendElement("div", {"id": "popHint"}, _Html, document.body);
                    _objHint.style.display = "none";
                    _objText = $("popHintText");
                }
                show();
            },
            // 显示
            show = function () {
                _objHint.style.display = "";
                _marTop = _objHint.offsetHeight;
                _msg = "<span class=\"popIcon " + _type + "\"></span>" + _msg;
                _objText.innerHTML = _msg;
                _objHint.style.left = _place.x + "px";
                _objHint.style.top = (_place.y - _marTop + 8) + "px";
                // 关闭触发事件
                switch (_event) {
                    case "blur" :
                        myAddEventListener(_obj, 'blur', hide);
                        break;
                    //default :
                    case "click" :
                        myAddEventListener(document, 'mousedown', hide);
                        break;
                    //这里可以自己扩展很多事件...
                }
            },
            // 关闭
            hide = function () {
                _objHint.style.display = "none";
                _objText.innerHTML = "";
                // 移除关闭触发事件
                myRemoveEventListener(_obj, 'blur', hide);
                myRemoveEventListener(document, 'mousedown', hide);
            };
        init();
    }

    -->
</script>
<script type="text/javascript">
    <!--
    /*********************************************
     - statInput 演示函数
     *********************************************/
    myAddEventListener(window, "load", testStatInput);

    function testStatInput() {
        statInput('Test_1', 100, {_max: 'stat_max', _total: 'stat_total', _left: 'stat_left', _hint: true});
    }

    /*********************************************
     - popHint 演示函数
     *********************************************/
    function testPopHint() {
        if ($('Test2').value == '') {
            popHint($('Test2'), 'Test2不能为空...', {_event: 'blur'});
            $('Test2').focus();
            return false;
        }
        if ($('Test3').value == '') {
            popHint($('Test3'), 'Test3也不能为空...', 'blur');
            $('Test3').focus();
            return false;
        }
        if ($('Test4').value == '') {
            popHint($('Test4'), 'Test4虽然看不见,但也不能为空...');
            $('Test4').value = '填一点进去...';
            return false;
        }
        if ($('Test5').value == '') {
            popHint($('Test5'), 'Test5也一样...');
            return false;
        }
    }

    -->
</script>
<script type="text/javascript">
    function changeOrderStatus(status) {

    }

    function getManey(orderNo) {

    }

    function createText(id, textId, obj) {
        $("#" + id).find("tr." + textId).each(function (i) {
            if (i >= 0) {
                if (this.style.display == "none") {
                    this.style.display = "";
                    $(obj).text("提交评论");
                } else {
                    var url="/render/comment/create";
                    $.ajax({
                        url : url,
                        type : "post",
                        success : function(data) {
                            if (!data.success){
                                HFalert({title:data.message, type: 'warning', confirmButtonText: '确定'});
                            }
                            HFalert({title:data.message, type: 'warning', confirmButtonText: '确定'});
                        }
                    });
                    this.style.display = "none";
                    $(obj).text("评论完成");
                }
            }
        });
    }

    $(".order-type a").click(function () {
        var orderStatus = $(this).attr("order-status");
        if ('0' === orderStatus) {
            $("table[order-status]").show();
        } else {
            $("table[order-status]").hide();
            $("table[order-status=" + orderStatus + "]").show();
        }
        $(".order-type div").removeClass("selected");
        $(this).parent("div").addClass("selected");
    });

    function changeTr(id, obj) {
        $("#" + id).find("tr.dingdan").each(function (i) {
            /*if (i > 0) {
                if (this.style.display == "none") {
                    $(this).slideDown(500);
                    // this.slideDown();
                    $(obj).text("收缩");
                    // obj.value="收缩";
                } else {
                    $(this).slideUp(500);
                    // this.slideUp();
                    $(obj).text("展开");
                    // obj.value="展开";
                }
            }*/
            if (i >= 0) {
                if (this.style.display == "none") {
                    this.style.display = "";
                    $(obj).text("收缩");
                    // obj.value="收缩";
                } else {
                    this.style.display = "none";
                    $(obj).text("展开");
                    // obj.value="展开";
                }
            }
            // i > 0 ? (this.style.display == "none" ? this.style.display = "" : this.style.display = "none") : ($(this).next().css("display") == "none" ? (obj.value = "折叠") : (obj.value = "展开"));
        });
    }
</script>
</html>